import React, {Component} from 'react'
import {inject, observer} from 'mobx-react';
import {observable,action,toJS} from 'mobx';
import { routerShape } from 'react-router';

import {Checkbox,Tabs} from "antd"

import TopSearchPanel from "./TopSearchPanel"
import {WeaAlertPage, WeaNewScroll, WeaTab} from 'ecCom';
import WeaWhitePage from "../../../Component/wea-white-page"
import CreateGroupModal from "./CreateGroupModal"
import Attention from "./Attention"

import { WeaLocaleProvider } from "ecCom";
import LeftContainer from "../../LeftContainer";
const getLabel = WeaLocaleProvider.getLabel;
const { TabPane } = Tabs;
@inject('blogMyBlog')
@observer
class Attentions extends Component {
    static contextTypes = {
        router: routerShape
    }

    constructor(props) {
        super(props)
        this.state = this.initData()
    }

    initData = () => {
        return {
            checksCount: 0,
            checksValue: false,
            indeterminateValue: false,

            selectValue: "",
            selectName: "",

            currentGroup: {
                groupId: "all",
                groupName: getLabel(384389,"全部关注")
            },

            // data: []
        }
    }

    componentWillReceiveProps(props) {
        // if(this.state.data.length == 0){
            // const {data} = props
            // this.setState({data: data})
        // }
    }

    get userIdsString() {
        return this.getCheckedValue("userId")
    }

    get isLowersString() {
        return this.getCheckedValue("islower")
    }

    getCheckedValue = (name) => {
        let {attentionList} = toJS(this.props.blogMyBlog.status)
        let data = attentionList.attentionList || [];
        if (name) {
            let result = []
            data.forEach(
                item => {
                    if (item.checked) {
                        result.push(item[name])
                    }
                }
            )
            return result.join(",")
        } else {
            return ""
        }
    }

    set clearData(value) {
        if (value) this.setState({
            checksCount: 0,
            checksValue: false,
            indeterminateValue: false,

            selectValue: "",
            selectName: "",
        })
    }


    onChangeTab = (val) =>{
        const { getAttentionList,getWeiboGroup} = this.props.blogMyBlog;
        if(val==1){
            getAttentionList({groupId:"all"});
            getWeiboGroup();
           this.changeGroup({groupId: "all",groupName: getLabel(384389,"全部关注")});
        }else{
            getAttentionList({groupId:"special"})
            getWeiboGroup();
        }
    }



    cancelSpecial = (params) => {
        const {cancelSpecialUser} = this.props.blogMyBlog;
        cancelSpecialUser(params);

    }


    render() {
        let {attentionList} = toJS(this.props.blogMyBlog.status)
        let data = attentionList.attentionList || [];
        let {checksValue, checksCount, indeterminateValue,  currentGroup} = this.state,
            {weiboGroup, height, changeGroup} = this.props,
            groups = weiboGroup.groupList || [],
            groupsBefore = [],
            groupsAfter = [],
            groupsAttention = []

         const {isSpecial,allCount,specialCount,addSpecialUsers} = this.props.blogMyBlog;

        
        groups.forEach(
            item => {
                if ((item.groupId == "all") || (item.groupId == "nogroup")) {
                    groupsBefore.push(item)
                    if (item.groupId == "nogroup") {
                        groupsAttention.push(item)
                    }
                } else {
                    groupsAfter.push(item)
                    groupsAttention.push(item)
                }
            }
        )
let alltab = getLabel(384389,"全部关注")+"("+allCount+")";
        let specialtab = getLabel(514285,'特别关注')+"("+specialCount+")";
        return (
            <div className="wea-myBlog-fan">
                <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@4kk6cd`} defaultActiveKey="1" onChange={this.onChangeTab}>

                    <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@cbppt9`} tab={alltab} key="1">
                        <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@dr9nvo`} height={height - 45}>
                            <TopSearchPanel ecId={`${this && this.props && this.props.ecId || ''}_TopSearchPanel@thf4y6`}
                                groupsBefore={groupsBefore}
                                groupsAfter={groupsAfter}
                                status={indeterminateValue}
                                changeGroup={this.changeGroup}
                                defaultGroup={currentGroup}
                            />
                            <div style={{padding: "16px 16px 8px 16px"}}>
                                <Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@gmnm1j`}
                                    className={"wea-fft-check " + (indeterminateValue ? "wea-checkbox-indeterminate" : "")}
                                    checked={checksValue}
                                    onChange={this.onChecks}
                                    indeterminate={indeterminateValue}
                                >{getLabel(556,"全选")}</Checkbox>
                                <span>
                        &nbsp;&nbsp;&nbsp;{getLabel(31503,"已选择")}&nbsp;
                                    <span style={{color: '#32a8ff'}}>{checksCount}</span>
                                    &nbsp;{getLabel(384340,"个对象")}
                    </span>
                            </div>

                            {
                                data.length ? (
                                    <div style={{padding: "0 8px"}}>
                                        {
                                            data.map(
                                                (item,key) => {
                                                    return (
                                                        <Attention ecId={`${this && this.props && this.props.ecId || ''}_Attention@bbkcyj@${key}`}
                                                            type="attention"
                                                            groups={groupsAttention}
                                                            data={item}
                                                            onCheck={this.onCheck}
                                                            group={currentGroup}
                                                            isSpecial={isSpecial}
                                                            addSpecial={addSpecialUsers}
                                                            cancelSpecial={this.cancelSpecial}
                                                        />
                                                    )
                                                }
                                            )
                                        }
                                    </div>
                                ) :<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@yrgzc5`} icon='icon-coms-blank' style={{"position": "absolute",
                                    "margin-left": "calc(50% - 61px)",
                                    "margin-top": "20%"}}>
                                    <div>{getLabel(514295,'暂无关注人员') }</div>
                                </WeaAlertPage>
                            }
                        </WeaNewScroll>
                        <CreateGroupModal   blogMyBlog={this.props.blogMyBlog} ecId={`${this && this.props && this.props.ecId || ''}_CreateGroupModal@c3nygq`} requestData={this.createOrEditGroup} />
                    </TabPane>
                    <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@tfp29w`} tab={specialtab} key="2">
                        <span style={{"color": "#a0a4a7"}}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{getLabel(515092,'提示：将关注人加入到特别关注，他发布微博时，您将收到新微博提醒，且他发布的微博将在主页中置顶显示。')}</span>
                        <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@i11lir`} height={height - 45}>
                            <div style={{padding: "10px 16px 8px 16px"}}>
                                <Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@95i0bk`}
                                    className={"wea-fft-check " + (indeterminateValue ? "wea-checkbox-indeterminate" : "")}
                                    checked={checksValue}
                                    onChange={this.onChecks}
                                    indeterminate={indeterminateValue}
                                >{getLabel(556,"全选")}</Checkbox>
                                <span>
                        &nbsp;&nbsp;&nbsp;{getLabel(31503,"已选择")}&nbsp;
                                    <span style={{color: '#32a8ff'}}>{checksCount}</span>
                                    &nbsp;{getLabel(384340,"个对象")}
                    </span>
                            </div>

                            {
                                data.length ? (
                                    <div style={{padding: "0 8px"}}>
                                        {
                                            data.map(
                                                (item,key) => {
                                                    return (
                                                        <Attention ecId={`${this && this.props && this.props.ecId || ''}_Attention@rnb4gu@${key}`}
                                                            type="attention"
                                                            groups={groupsAttention}
                                                            data={item}
                                                            onCheck={this.onCheck}
                                                            group={currentGroup}
                                                            isSpecial={isSpecial}
                                                            addSpecial={addSpecialUsers}
                                                            cancelSpecial={this.cancelSpecial}
                                                        />
                                                    )
                                                }
                                            )
                                        }
                                    </div>
                                ) : <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@k6bio4`} icon='icon-coms-blank' style={{"position": "absolute",
                                    "margin-left": "calc(50% - 174px)",
                                    "margin-top": "20%"}} paddingTop={`${height / 2 - 50}px`}>
                                <div>{getLabel(83553,"暂无数据")}</div>
                                </WeaAlertPage>
                            }
                        </WeaNewScroll>
                        <CreateGroupModal ecId={`${this && this.props && this.props.ecId || ''}_CreateGroupModal@f4jhn3`} requestData={this.createOrEditGroup} />
                    </TabPane>
                </Tabs>
            </div>
        )
    }

    createOrEditGroup = (params) => {
        const {moduleStatus} = this.props.blogMyBlog;
        if(moduleStatus.createOrEdit=='create'){
            this.createGroup(params);
        }else if(moduleStatus.createOrEdit=='edit'){
            this.editGroup(params);
        }else if(moduleStatus.createOrEdit=='createAndMove' || moduleStatus.createOrEdit=='createAndCopy'){
            this.props.selectGroup(moduleStatus.createOrEdit,params.groupName);
            moduleStatus.showGroupCreate=false;
            this.props.onCheck(false);
        }
    }

    createGroup = (params) => {
        const {createGroup, getWeiboGroup, getAttentionList,moduleStatus} = this.props.blogMyBlog;
        createGroup(
            params,
            result => {
                let {status, groupInfo} = result,
                    {groupId, groupName} = groupInfo
                if (status == "1" && groupId) {
                    getWeiboGroup()
                    getAttentionList(
                        {groupId: groupId}
                    )
                    this.changeGroup({groupId: groupId, groupName: groupName})
                    
                }
            }
        )
        moduleStatus.showGroupCreate=false;
    }

    editGroup = (params) => {
        const {editGroup, getAttentionList,moduleStatus} = this.props.blogMyBlog;
        editGroup(
            params,
            result => {
                let {status, groupInfo} = result,
                    {groupId, groupName} = groupInfo
                if (status == "1" && groupId) {
                    getAttentionList(
                        {groupId: groupId}
                    )
                    this.changeGroup({groupId: groupId, groupName: groupName})
                }
            }
        )
        moduleStatus.showGroupCreate=false;
    }

    getList = (params) => {
        const {getAttentionList } = this.props.blogMyBlog
        
        getAttentionList(params)
    }

    changeGroup = (value) => {
        let {attentionListOnSelect} = this.props.blogMyBlog
        // attentionListOnSelect([]);
        this.setState({checksValue: false, checksCount: 0, indeterminateValue: false, currentGroup: value})
        this.props.onCheck(false)
        this.props.changeGroup(value)
    }

    onChecks = (e) => {
        let {attentionListOnSelect} = this.props.blogMyBlog
        let {attentionList} = toJS(this.props.blogMyBlog.status)
        let data = attentionList.attentionList || [];
        let checksValue = e.target.checked,
            _data = data.map(
                item => {
                    item.checked = checksValue
                    return item
                }
            ),
            _checksCount = checksValue ? data.length : 0
        this.setState({checksValue: checksValue, checksCount: _checksCount, indeterminateValue: false})
        attentionListOnSelect(attentionList:_data)
        this.props.onCheck(!!_checksCount)
    }

    onCheck = (userId, e) => {
        let {attentionListOnSelect} = this.props.blogMyBlog
        let {attentionList} = toJS(this.props.blogMyBlog.status)
        let data = attentionList.attentionList || [];
        
        let {  checksValue, checksCount, indeterminateValue} = this.state,
            checkValue = e.target.checked,
            _checksValue = checksValue,
            _checksCount = checksCount,
            _indeterminateValue = indeterminateValue,
            _data = data.map(
                item => {
                    let newItem = {...item}
                    if (item.userId == userId) {
                        // item.checked = checkValue
                        newItem = {...item,checked:checkValue}
                        if (checkValue) {
                            _checksCount++
                        } else {
                            _checksCount--
                            if (checksValue) {
                                _checksValue = false
                            }
                        }
                    }
                    return newItem
                }
            )
            let __data = [..._data]
        if (_checksCount == data.length) _checksValue = true
        if (_checksCount > 0 && _checksCount < data.length) {_indeterminateValue = true}
        else {_indeterminateValue = false}
        attentionListOnSelect({attentionList:__data});
        this.setState({
            // data: __data,
            checksValue: _checksValue,
            checksCount: _checksCount,
            indeterminateValue: _indeterminateValue
        })
        this.props.onCheck(!!_checksCount)
    }
}

export default Attentions